<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-table.css">
<link rel="stylesheet" href="../assets/css/sweetalert.css">
<link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="../assets/css/style.css"/>
<style>

</style>
<body style="background-color: #FFFFFF" onload="initFrameHeight()">
<div class="breadcrumbs">

</div>
<div class="page-content">
    <!--<div class="page-header">
        <h1>

        </h1>
    </div>&lt;!&ndash; /.page-header &ndash;&gt;-->

    <div class="row" style="">
        <div class="col-sm-12">
            <div class="space"></div>
            <form class="form-inline" id="searchForm" style="padding:2px 5px">
                <div class="form-group">
                    <label>姓名:</label>
                    <input class="form-control" type="text" id="searchTeaName" name="teaName">
                </div>
                &#12288;
                <div class="form-group">
                    <label>状态:</label>
                    <select class="form-control" id="searchState" name="state" style="width: 172px;">
                        <option value="">所有</option>
                        <option value="待审批">待审批</option>
                        <option value="通过">通过</option>
                        <option value="未通过">未通过</option>
                    </select>
                </div>
                &#12288;
                <div class="form-group" style="width: 500px">
                    <label>申请日期:</label>
                    <div class="input-daterange input-group" id="datepicker" style="width:86%">
                        <input class="form-control datepicker" readonly="readonly" type="text" placeholder="起始时间"
                               id="searchStartTime" name="timeStart" style="background-color: rgba(221, 221, 221, 0)">
                        <span class="input-group-addon add-on">&nbsp;-&nbsp;</span>
                        <input class="form-control datepicker" readonly="readonly" type="text" placeholder="结束时间"
                               id="searchEndTime" name="timeEnd" style="background-color: rgba(221, 221, 221, 0)">
                    </div>
                </div>
                &#12288;
                <button type="button" class="btn-sm btn-primary" onclick="searchAll()"><i
                        class="glyphicon glyphicon-search"></i> 搜索
                </button>
            </form>
            <hr>
            <table id="table" class="table-hover table-responsive"
                   data-search="false"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-export="true"
                   data-minimum-count-columns="2"
                   data-pagination="true"
                   data-unique-id="id"
                   data-page-number="1"
                   data-page-size="10"
                   data-page-list="[10, 20, 30, 40]"
                   data-pagination-pre-text="上一页"
                   data-pagination-next-text="下一页"
                   data-show-footer="false"
                   data-side-pagination="server"
                   data-valign="middle"
                   data-url="/teaApp/getAll"
                   data-query-params="queryParams"
                   data-response-handler="responseHandler">
            </table>
        </div>
    </div><!-- /.row -->
</div><!-- /.page-content -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myEditModalLabel">审批</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-horizontal" id="editTeaAppForm" role="form">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">教师编号:</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="editTeaAppId" name="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">回复:</label>
                        <div class="col-sm-6">
                            <textarea class="form-control" id="editResponse" name="response">
                            </textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="editState" name="state" style="width: 100%;">
                                <option value="待审批">待审批</option>
                                <option value="通过">通过</option>
                                <option value="未通过">未通过</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" onclick="updateTeaApp()">保存</button>
            </div>
        </div>
    </div>
</div>


</body>
<!-- PAGE CONTENT ENDS -->

<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrap-table.js"></script>
<script src="../assets/js/bootstrap-table-export.js"></script>
<script src="../assets/js/bootstrapValidator.min.js"></script>
<script src="../assets/js/tableExport.js"></script>
<script src="../assets/js/bootstrap-table-zh-CN.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<script src="../assets/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/js/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        $(".input-daterange").datepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd",
            autoclose: true,
            clearBtn: true,
            todayHighlight: true
        });
        $("#editModal").on("hidden.bs.modal", function () {
            document.getElementById("editTeaAppForm").reset();
        });
        $("#table").bootstrapTable({
            height: 600,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showColumns: true, //显示隐藏列
            striped: false,
            columns: [
                {
                    field: 'ck',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '姓名',
                    field: 'teaName',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                },
                {
                    title: '申请时间',
                    field: 'appTimeFormat',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                },
                {
                    title: '所调课程',
                    field: 'classInfo',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '原因',
                    field: 'reason',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '期望',
                    field: 'wish',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '回复',
                    field: 'response',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '状态',
                    field: 'state',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '操作',
                    field: 'operate',
                    align: 'center',
                    valign: 'middle',
                    formatter: operateFormatter
                }
            ]
        });
    });

    function searchAll() {
        $("#table").bootstrapTable('refresh');
    }

    function queryParams(params) {
        return {
            pageSize: params.limit,
            pageNumber: $('#table').bootstrapTable('getOptions').pageNumber,
            sort: params.sort,
            order: params.order,
            teaName: $("#searchTeaName").val(),
            state: $("#searchState").val(),
            timeStart: $("#searchStartTime").datepicker("getDate"),
            timeEnd: $("#searchEndTime").datepicker("getDate")
        };
    }

    function responseHandler(res) {
        return {
            "rows": res.teaAppList.list,
            "total": res.teaAppList.total
        }
    }

    function operateFormatter(value, row, index) {
        var stateButton = '<button class="btn-sm btn-primary" onclick="editTeaApp(' + row.id + ')"><i class="glyphicon glyphicon-edit"></i> 审批</button>';
        return stateButton;
    }
    function editTeaApp(id) {
        var row = $("#table").bootstrapTable("getRowByUniqueId", id);
        $("#editModal").modal('show');
        $("#editTeaAppId").val(row.id);
        $("#editResponse").val(row.response);
        $("#editState").val(row.state);
    }
    function updateTeaApp() {
        $.ajax({
            url: '/teaApp/updateTeaApp',
            type: 'post',
            data: $("#editTeaAppForm").serialize(),
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    $("#editModal").modal('hide');
                    searchAll();
                    swal("Good Job", "修改成功", "success");
                }
                else {
                    sweetAlert("Oops...", "修改失败", "error");
                }

            },
            error: function () {
                sweetAlert("Oops...", "修改失败", "error");
            }
        });
    }

    function initFrameHeight() {
        parent.scrollTo(0, 0);
    }
</script>
